<template>
  <el-dialog
    v-model="dialogVisible"
    title="调度日历"
    width="1200px"
    :close-on-click-modal="false"
  >
    <div class="schedule-calendar">
      <!-- 工具栏 -->
      <div class="calendar-toolbar">
        <div class="toolbar-left">
          <el-button-group>
            <el-button
              :type="viewMode === 'month' ? 'primary' : ''"
              @click="viewMode = 'month'"
            >
              月视图
            </el-button>
            <el-button
              :type="viewMode === 'week' ? 'primary' : ''"
              @click="viewMode = 'week'"
            >
              周视图
            </el-button>
            <el-button
              :type="viewMode === 'day' ? 'primary' : ''"
              @click="viewMode = 'day'"
            >
              日视图
            </el-button>
          </el-button-group>
          
          <el-button @click="goToToday" style="margin-left: 15px">
            今天
          </el-button>
        </div>
        
        <div class="toolbar-center">
          <el-button-group>
            <el-button @click="previousPeriod">
              <el-icon><ArrowLeft /></el-icon>
            </el-button>
            <el-button @click="nextPeriod">
              <el-icon><ArrowRight /></el-icon>
            </el-button>
          </el-button-group>
          
          <h3 class="current-period">{{ currentPeriodText }}</h3>
        </div>
        
        <div class="toolbar-right">
          <el-button type="primary" @click="showAddScheduleDialog">
            <el-icon><Plus /></el-icon>
            新增调度
          </el-button>
          <el-button @click="refreshCalendar">
            <el-icon><Refresh /></el-icon>
            刷新
          </el-button>
        </div>
      </div>

      <!-- 图例 -->
      <div class="calendar-legend">
        <div class="legend-item">
          <div class="legend-color flood-control"></div>
          <span>防洪调度</span>
        </div>
        <div class="legend-item">
          <div class="legend-color water-supply"></div>
          <span>供水调度</span>
        </div>
        <div class="legend-item">
          <div class="legend-color power-generation"></div>
          <span>发电调度</span>
        </div>
        <div class="legend-item">
          <div class="legend-color ecological"></div>
          <span>生态调度</span>
        </div>
        <div class="legend-item">
          <div class="legend-color comprehensive"></div>
          <span>综合调度</span>
        </div>
      </div>

      <!-- 日历内容 -->
      <div class="calendar-content">
        <!-- 月视图 -->
        <div v-if="viewMode === 'month'" class="month-view">
          <el-calendar v-model="currentDate" class="custom-calendar">
            <template #date-cell="{ data }">
              <div class="calendar-cell">
                <div class="cell-date">{{ data.day.split('-').pop() }}</div>
                <div class="cell-schedules">
                  <div
                    v-for="schedule in getSchedulesForDate(data.day)"
                    :key="schedule.id"
                    class="schedule-item"
                    :class="schedule.dispatchType"
                    @click="viewScheduleDetail(schedule)"
                  >
                    <div class="schedule-time">{{ formatTime(schedule.scheduledTime) }}</div>
                    <div class="schedule-name">{{ schedule.planName }}</div>
                    <div class="schedule-status">
                      <el-tag :type="getStatusTagType(schedule.status)" size="small">
                        {{ getStatusText(schedule.status) }}
                      </el-tag>
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </el-calendar>
        </div>

        <!-- 周视图 -->
        <div v-if="viewMode === 'week'" class="week-view">
          <div class="week-header">
            <div class="time-column">时间</div>
            <div
              v-for="day in weekDays"
              :key="day.date"
              class="day-column"
              :class="{ today: isToday(day.date) }"
            >
              <div class="day-name">{{ day.name }}</div>
              <div class="day-date">{{ day.date.split('-').pop() }}</div>
            </div>
          </div>
          
          <div class="week-body">
            <div
              v-for="hour in 24"
              :key="hour"
              class="hour-row"
            >
              <div class="time-column">{{ formatHour(hour - 1) }}</div>
              <div
                v-for="day in weekDays"
                :key="day.date"
                class="day-column"
                @click="addScheduleAtTime(day.date, hour - 1)"
              >
                <div
                  v-for="schedule in getSchedulesForDateTime(day.date, hour - 1)"
                  :key="schedule.id"
                  class="schedule-block"
                  :class="schedule.dispatchType"
                  @click.stop="viewScheduleDetail(schedule)"
                >
                  <div class="schedule-name">{{ schedule.planName }}</div>
                  <div class="schedule-time">{{ formatTime(schedule.scheduledTime) }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 日视图 -->
        <div v-if="viewMode === 'day'" class="day-view">
          <div class="day-header">
            <h4>{{ formatDate(currentDate) }}</h4>
          </div>
          
          <div class="day-timeline">
            <div
              v-for="hour in 24"
              :key="hour"
              class="hour-slot"
            >
              <div class="hour-label">{{ formatHour(hour - 1) }}</div>
              <div
                class="hour-content"
                @click="addScheduleAtTime(formatDateString(currentDate), hour - 1)"
              >
                <div
                  v-for="schedule in getSchedulesForDateTime(formatDateString(currentDate), hour - 1)"
                  :key="schedule.id"
                  class="schedule-event"
                  :class="schedule.dispatchType"
                  @click.stop="viewScheduleDetail(schedule)"
                >
                  <div class="event-header">
                    <span class="event-name">{{ schedule.planName }}</span>
                    <el-tag :type="getStatusTagType(schedule.status)" size="small">
                      {{ getStatusText(schedule.status) }}
                    </el-tag>
                  </div>
                  <div class="event-details">
                    <div class="event-time">{{ formatTime(schedule.scheduledTime) }}</div>
                    <div class="event-type">{{ getTypeText(schedule.dispatchType) }}</div>
                    <div class="event-priority">优先级: {{ getPriorityText(schedule.priority) }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 调度详情弹窗 -->
    <el-dialog
      v-model="scheduleDetailVisible"
      title="调度计划详情"
      width="600px"
      append-to-body
    >
      <div v-if="selectedSchedule" class="schedule-detail">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="计划名称">
            {{ selectedSchedule.planName }}
          </el-descriptions-item>
          <el-descriptions-item label="调度类型">
            <el-tag :type="getTypeTagType(selectedSchedule.dispatchType)" size="small">
              {{ getTypeText(selectedSchedule.dispatchType) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="优先级">
            <el-tag :type="getPriorityTagType(selectedSchedule.priority)" size="small">
              {{ getPriorityText(selectedSchedule.priority) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="执行状态">
            <el-tag :type="getStatusTagType(selectedSchedule.status)" size="small">
              {{ getStatusText(selectedSchedule.status) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="计划执行时间">
            {{ formatDateTime(selectedSchedule.scheduledTime) }}
          </el-descriptions-item>
          <el-descriptions-item label="预计持续时间">
            {{ selectedSchedule.estimatedDuration || 0 }} 小时
          </el-descriptions-item>
          <el-descriptions-item label="创建人">
            {{ selectedSchedule.creator }}
          </el-descriptions-item>
          <el-descriptions-item label="创建时间">
            {{ formatDateTime(selectedSchedule.createTime) }}
          </el-descriptions-item>
          <el-descriptions-item label="计划描述" :span="2">
            {{ selectedSchedule.description || '暂无描述' }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="scheduleDetailVisible = false">关闭</el-button>
          <el-button type="primary" @click="editSchedule(selectedSchedule)">编辑</el-button>
          <el-button type="success" @click="executeSchedule(selectedSchedule)">执行</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 新增调度弹窗 -->
    <el-dialog
      v-model="addScheduleVisible"
      title="新增调度计划"
      width="500px"
      append-to-body
    >
      <el-form
        ref="addScheduleFormRef"
        :model="addScheduleForm"
        :rules="addScheduleRules"
        label-width="100px"
      >
        <el-form-item label="计划名称" prop="planName">
          <el-input v-model="addScheduleForm.planName" placeholder="请输入计划名称" />
        </el-form-item>
        <el-form-item label="调度类型" prop="dispatchType">
          <el-select v-model="addScheduleForm.dispatchType" placeholder="请选择调度类型">
            <el-option label="防洪调度" value="flood-control" />
            <el-option label="供水调度" value="water-supply" />
            <el-option label="发电调度" value="power-generation" />
            <el-option label="生态调度" value="ecological" />
            <el-option label="综合调度" value="comprehensive" />
          </el-select>
        </el-form-item>
        <el-form-item label="优先级" prop="priority">
          <el-select v-model="addScheduleForm.priority" placeholder="请选择优先级">
            <el-option label="低" value="low" />
            <el-option label="中" value="medium" />
            <el-option label="高" value="high" />
            <el-option label="紧急" value="urgent" />
          </el-select>
        </el-form-item>
        <el-form-item label="执行时间" prop="scheduledTime">
          <el-date-picker
            v-model="addScheduleForm.scheduledTime"
            type="datetime"
            placeholder="请选择执行时间"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="持续时间" prop="estimatedDuration">
          <el-input-number
            v-model="addScheduleForm.estimatedDuration"
            :min="0.5"
            :step="0.5"
            placeholder="小时"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="计划描述">
          <el-input
            v-model="addScheduleForm.description"
            type="textarea"
            :rows="3"
            placeholder="请输入计划描述"
          />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="addScheduleVisible = false">取消</el-button>
          <el-button type="primary" @click="saveSchedule">保存</el-button>
        </div>
      </template>
    </el-dialog>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="exportCalendar">
          导出日历
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { ArrowLeft, ArrowRight, Plus, Refresh } from '@element-plus/icons-vue'

interface Props {
  visible: boolean
}

interface Emits {
  (e: 'update:visible', value: boolean): void
  (e: 'edit-schedule', data: any): void
  (e: 'execute-schedule', data: any): void
}

const props = withDefaults(defineProps<Props>(), {
  visible: false
})

const emit = defineEmits<Emits>()

const dialogVisible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
})

// 视图模式
const viewMode = ref('month')

// 当前日期
const currentDate = ref(new Date())

// 调度数据
const scheduleData = ref([
  {
    id: 1,
    planName: '春季防洪调度计划',
    dispatchType: 'flood-control',
    priority: 'high',
    status: 'pending',
    scheduledTime: '2024-03-15 08:00:00',
    estimatedDuration: 4,
    creator: '张三',
    createTime: '2024-03-10 10:00:00',
    description: '春季防洪期间的水库调度计划'
  },
  {
    id: 2,
    planName: '城市供水保障调度',
    dispatchType: 'water-supply',
    priority: 'medium',
    status: 'executing',
    scheduledTime: '2024-03-15 14:00:00',
    estimatedDuration: 2,
    creator: '李四',
    createTime: '2024-03-12 09:00:00',
    description: '保障城市供水安全的调度计划'
  },
  {
    id: 3,
    planName: '水电站发电调度',
    dispatchType: 'power-generation',
    priority: 'low',
    status: 'completed',
    scheduledTime: '2024-03-14 06:00:00',
    estimatedDuration: 8,
    creator: '王五',
    createTime: '2024-03-13 16:00:00',
    description: '优化发电效率的调度计划'
  },
  {
    id: 4,
    planName: '生态流量调度',
    dispatchType: 'ecological',
    priority: 'medium',
    status: 'pending',
    scheduledTime: '2024-03-16 10:00:00',
    estimatedDuration: 3,
    creator: '赵六',
    createTime: '2024-03-14 11:00:00',
    description: '维护河流生态环境的调度计划'
  },
  {
    id: 5,
    planName: '综合调度演练',
    dispatchType: 'comprehensive',
    priority: 'urgent',
    status: 'pending',
    scheduledTime: '2024-03-17 09:00:00',
    estimatedDuration: 6,
    creator: '孙七',
    createTime: '2024-03-15 08:00:00',
    description: '多目标综合调度演练计划'
  }
])

// 调度详情弹窗
const scheduleDetailVisible = ref(false)
const selectedSchedule = ref(null)

// 新增调度弹窗
const addScheduleVisible = ref(false)
const addScheduleFormRef = ref()
const addScheduleForm = ref({
  planName: '',
  dispatchType: '',
  priority: '',
  scheduledTime: '',
  estimatedDuration: 1,
  description: ''
})

const addScheduleRules = {
  planName: [
    { required: true, message: '请输入计划名称', trigger: 'blur' }
  ],
  dispatchType: [
    { required: true, message: '请选择调度类型', trigger: 'change' }
  ],
  priority: [
    { required: true, message: '请选择优先级', trigger: 'change' }
  ],
  scheduledTime: [
    { required: true, message: '请选择执行时间', trigger: 'change' }
  ]
}

// 当前周期文本
const currentPeriodText = computed(() => {
  const date = currentDate.value
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  
  if (viewMode.value === 'month') {
    return `${year}年${month}月`
  } else if (viewMode.value === 'week') {
    const weekStart = getWeekStart(date)
    const weekEnd = getWeekEnd(date)
    return `${formatDate(weekStart)} - ${formatDate(weekEnd)}`
  } else {
    return formatDate(date)
  }
})

// 周视图的天数
const weekDays = computed(() => {
  const start = getWeekStart(currentDate.value)
  const days = []
  
  for (let i = 0; i < 7; i++) {
    const date = new Date(start)
    date.setDate(start.getDate() + i)
    days.push({
      date: formatDateString(date),
      name: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][date.getDay()]
    })
  }
  
  return days
})

// 获取指定日期的调度计划
const getSchedulesForDate = (dateString: string) => {
  return scheduleData.value.filter(schedule => {
    const scheduleDate = schedule.scheduledTime.split(' ')[0]
    return scheduleDate === dateString
  })
}

// 获取指定日期时间的调度计划
const getSchedulesForDateTime = (dateString: string, hour: number) => {
  return scheduleData.value.filter(schedule => {
    const scheduleDate = schedule.scheduledTime.split(' ')[0]
    const scheduleHour = parseInt(schedule.scheduledTime.split(' ')[1].split(':')[0])
    return scheduleDate === dateString && scheduleHour === hour
  })
}

// 获取周开始日期
const getWeekStart = (date: Date) => {
  const start = new Date(date)
  const day = start.getDay()
  const diff = start.getDate() - day
  start.setDate(diff)
  return start
}

// 获取周结束日期
const getWeekEnd = (date: Date) => {
  const end = new Date(date)
  const day = end.getDay()
  const diff = end.getDate() - day + 6
  end.setDate(diff)
  return end
}

// 判断是否为今天
const isToday = (dateString: string) => {
  const today = formatDateString(new Date())
  return dateString === today
}

// 前一个周期
const previousPeriod = () => {
  const date = new Date(currentDate.value)
  
  if (viewMode.value === 'month') {
    date.setMonth(date.getMonth() - 1)
  } else if (viewMode.value === 'week') {
    date.setDate(date.getDate() - 7)
  } else {
    date.setDate(date.getDate() - 1)
  }
  
  currentDate.value = date
}

// 下一个周期
const nextPeriod = () => {
  const date = new Date(currentDate.value)
  
  if (viewMode.value === 'month') {
    date.setMonth(date.getMonth() + 1)
  } else if (viewMode.value === 'week') {
    date.setDate(date.getDate() + 7)
  } else {
    date.setDate(date.getDate() + 1)
  }
  
  currentDate.value = date
}

// 回到今天
const goToToday = () => {
  currentDate.value = new Date()
}

// 刷新日历
const refreshCalendar = () => {
  ElMessage.success('日历已刷新')
}

// 显示新增调度对话框
const showAddScheduleDialog = () => {
  addScheduleForm.value = {
    planName: '',
    dispatchType: '',
    priority: '',
    scheduledTime: '',
    estimatedDuration: 1,
    description: ''
  }
  addScheduleVisible.value = true
}

// 在指定时间添加调度
const addScheduleAtTime = (dateString: string, hour: number) => {
  const scheduledTime = `${dateString} ${hour.toString().padStart(2, '0')}:00:00`
  addScheduleForm.value.scheduledTime = scheduledTime
  showAddScheduleDialog()
}

// 查看调度详情
const viewScheduleDetail = (schedule: any) => {
  selectedSchedule.value = schedule
  scheduleDetailVisible.value = true
}

// 编辑调度
const editSchedule = (schedule: any) => {
  scheduleDetailVisible.value = false
  emit('edit-schedule', schedule)
}

// 执行调度
const executeSchedule = (schedule: any) => {
  scheduleDetailVisible.value = false
  emit('execute-schedule', schedule)
}

// 保存调度
const saveSchedule = async () => {
  try {
    await addScheduleFormRef.value.validate()
    
    const newSchedule = {
      id: Date.now(),
      ...addScheduleForm.value,
      status: 'pending',
      creator: '当前用户',
      createTime: new Date().toISOString().replace('T', ' ').split('.')[0]
    }
    
    scheduleData.value.push(newSchedule)
    addScheduleVisible.value = false
    ElMessage.success('调度计划创建成功')
  } catch {
    // 验证失败
  }
}

// 导出日历
const exportCalendar = () => {
  ElMessage.success('日历导出功能开发中...')
}

// 获取类型标签类型
const getTypeTagType = (type: string) => {
  const typeMap = {
    'flood-control': 'danger',
    'water-supply': 'primary',
    'power-generation': 'warning',
    'ecological': 'success',
    'comprehensive': 'info'
  }
  return typeMap[type] || 'info'
}

// 获取类型文本
const getTypeText = (type: string) => {
  const textMap = {
    'flood-control': '防洪调度',
    'water-supply': '供水调度',
    'power-generation': '发电调度',
    'ecological': '生态调度',
    'comprehensive': '综合调度'
  }
  return textMap[type] || type
}

// 获取优先级标签类型
const getPriorityTagType = (priority: string) => {
  const typeMap = {
    'low': 'info',
    'medium': 'warning',
    'high': 'danger',
    'urgent': 'danger'
  }
  return typeMap[priority] || 'info'
}

// 获取优先级文本
const getPriorityText = (priority: string) => {
  const textMap = {
    'low': '低',
    'medium': '中',
    'high': '高',
    'urgent': '紧急'
  }
  return textMap[priority] || priority
}

// 获取状态标签类型
const getStatusTagType = (status: string) => {
  const typeMap = {
    'pending': 'info',
    'executing': 'warning',
    'completed': 'success',
    'paused': 'info',
    'cancelled': 'danger'
  }
  return typeMap[status] || 'info'
}

// 获取状态文本
const getStatusText = (status: string) => {
  const textMap = {
    'pending': '待执行',
    'executing': '执行中',
    'completed': '已完成',
    'paused': '已暂停',
    'cancelled': '已取消'
  }
  return textMap[status] || status
}

// 格式化日期
const formatDate = (date: Date) => {
  return date.toLocaleDateString('zh-CN')
}

// 格式化日期字符串
const formatDateString = (date: Date) => {
  return date.toISOString().split('T')[0]
}

// 格式化时间
const formatTime = (dateTime: string) => {
  return dateTime.split(' ')[1].substring(0, 5)
}

// 格式化小时
const formatHour = (hour: number) => {
  return `${hour.toString().padStart(2, '0')}:00`
}

// 格式化日期时间
const formatDateTime = (dateTime: string) => {
  if (!dateTime) return '-'
  return new Date(dateTime).toLocaleString('zh-CN')
}
</script>

<style scoped>
.schedule-calendar {
  height: 700px;
  display: flex;
  flex-direction: column;
}

.calendar-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e4e7ed;
}

.toolbar-left,
.toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.toolbar-center {
  display: flex;
  align-items: center;
  gap: 15px;
}

.current-period {
  margin: 0;
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.calendar-legend {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  padding: 10px;
  background-color: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e4e7ed;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #666;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.legend-color.flood-control {
  background-color: #f56c6c;
}

.legend-color.water-supply {
  background-color: #409eff;
}

.legend-color.power-generation {
  background-color: #e6a23c;
}

.legend-color.ecological {
  background-color: #67c23a;
}

.legend-color.comprehensive {
  background-color: #909399;
}

.calendar-content {
  flex: 1;
  overflow: hidden;
}

/* 月视图样式 */
.month-view {
  height: 100%;
}

.custom-calendar {
  height: 100%;
}

.calendar-cell {
  height: 100px;
  padding: 4px;
  overflow: hidden;
}

.cell-date {
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.cell-schedules {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.schedule-item {
  padding: 2px 4px;
  border-radius: 3px;
  font-size: 11px;
  cursor: pointer;
  border-left: 3px solid;
  background-color: rgba(255, 255, 255, 0.9);
}

.schedule-item.flood-control {
  border-left-color: #f56c6c;
  background-color: rgba(245, 108, 108, 0.1);
}

.schedule-item.water-supply {
  border-left-color: #409eff;
  background-color: rgba(64, 158, 255, 0.1);
}

.schedule-item.power-generation {
  border-left-color: #e6a23c;
  background-color: rgba(230, 162, 60, 0.1);
}

.schedule-item.ecological {
  border-left-color: #67c23a;
  background-color: rgba(103, 194, 58, 0.1);
}

.schedule-item.comprehensive {
  border-left-color: #909399;
  background-color: rgba(144, 147, 153, 0.1);
}

.schedule-item:hover {
  opacity: 0.8;
}

.schedule-time {
  font-weight: 600;
  color: #333;
}

.schedule-name {
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.schedule-status {
  margin-top: 2px;
}

/* 周视图样式 */
.week-view {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  overflow: hidden;
}

.week-header {
  display: flex;
  background-color: #f8f9fa;
  border-bottom: 1px solid #e4e7ed;
}

.time-column {
  width: 80px;
  padding: 10px;
  text-align: center;
  font-weight: 600;
  color: #666;
  border-right: 1px solid #e4e7ed;
}

.day-column {
  flex: 1;
  padding: 10px;
  text-align: center;
  border-right: 1px solid #e4e7ed;
  cursor: pointer;
}

.day-column:last-child {
  border-right: none;
}

.day-column.today {
  background-color: rgba(64, 158, 255, 0.1);
}

.day-name {
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.day-date {
  color: #666;
  font-size: 14px;
}

.week-body {
  flex: 1;
  overflow-y: auto;
}

.hour-row {
  display: flex;
  min-height: 60px;
  border-bottom: 1px solid #f0f0f0;
}

.hour-row:hover {
  background-color: #fafafa;
}

.schedule-block {
  margin: 2px;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  border-left: 3px solid;
}

.schedule-block:hover {
  opacity: 0.8;
}

/* 日视图样式 */
.day-view {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.day-header {
  padding: 15px;
  background-color: #f8f9fa;
  border-bottom: 1px solid #e4e7ed;
  text-align: center;
}

.day-header h4 {
  margin: 0;
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.day-timeline {
  flex: 1;
  overflow-y: auto;
  border: 1px solid #e4e7ed;
  border-top: none;
}

.hour-slot {
  display: flex;
  min-height: 80px;
  border-bottom: 1px solid #f0f0f0;
}

.hour-slot:hover {
  background-color: #fafafa;
}

.hour-label {
  width: 80px;
  padding: 10px;
  text-align: center;
  font-weight: 600;
  color: #666;
  border-right: 1px solid #e4e7ed;
  background-color: #f8f9fa;
}

.hour-content {
  flex: 1;
  padding: 8px;
  cursor: pointer;
}

.schedule-event {
  margin-bottom: 8px;
  padding: 10px;
  border-radius: 6px;
  border-left: 4px solid;
  background-color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition: all 0.2s;
}

.schedule-event:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.event-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.event-name {
  font-weight: 600;
  color: #333;
  font-size: 14px;
}

.event-details {
  display: flex;
  gap: 15px;
  font-size: 12px;
  color: #666;
}

.schedule-detail {
  padding: 20px 0;
}

.dialog-footer {
  text-align: right;
}

:deep(.el-calendar-table .el-calendar-day) {
  height: 120px;
  padding: 0;
}

:deep(.el-calendar__body) {
  padding: 0;
}

:deep(.el-descriptions__label) {
  font-weight: 500;
}
</style>